<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<%@page import="com.sse.VO.UsuarioVO"%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Casa Inteligente</title>
<%@ page import="java.util.ArrayList" %>
	<%@ page import="java.lang.Integer" %>
	<%@ page import="com.sse.VO.EventoVO" %>
	<%@ page import="com.sse.sensor.TipoSensor" %>
<link rel="stylesheet" href="http://localhost:8080/Fuentes/css/screen.css" type="text/css" media="screen" title="default" />
<!--[if IE]>
<link rel="stylesheet" media="all" type="text/css" href="css/pro_dropline_ie.css" />
<![endif]-->

<!--  jquery core -->
<script src="http://localhost:8080/Fuentes/js/jquery/jquery-1.4.1.min.js" type="text/javascript"></script>

<!--  checkbox styling script -->
<script src="http://localhost:8080/Fuentes/js/jquery/ui.core.js" type="text/javascript"></script>
<script src="http://localhost:8080/Fuentes/js/jquery/ui.checkbox.js" type="text/javascript"></script>
<script src="http://localhost:8080/Fuentes/js/jquery/jquery.bind.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
	$('input').checkBox();
	$('#toggle-all').click(function(){
 	$('#toggle-all').toggleClass('toggle-checked');
	$('#mainform input[type=checkbox]').checkBox('toggle');
	return false;
	});
});
</script>  

<![if !IE 7]>

<!--  styled select box script version 1 -->
<script src="http://localhost:8080/Fuentes/js/jquery/jquery.selectbox-0.5.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
	$('.styledselect').selectbox({ inputClass: "selectbox_styled" });
});
</script>
 

<![endif]>

<!--  styled select box script version 2 --> 
<script src="http://localhost:8080/Fuentes/js/jquery/jquery.selectbox-0.5_style_2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
	$('.styledselect_form_1').selectbox({ inputClass: "styledselect_form_1" });
	$('.styledselect_form_2').selectbox({ inputClass: "styledselect_form_2" });
});
</script>

<!--  styled select box script version 3 --> 
<script src="http://localhost:8080/Fuentes/js/jquery/jquery.selectbox-0.5_style_2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
	$('.styledselect_pages').selectbox({ inputClass: "styledselect_pages" });
});
</script>

<!--  styled file upload script --> 
<script src="http://localhost:8080/Fuentes/js/jquery/jquery.filestyle.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
  $(function() {
      $("input.file_1").filestyle({ 
          image: "http://localhost:8080/Fuentes/images/forms/choose-file.gif",
          imageheight : 21,
          imagewidth : 78,
          width : 310
      });
  });
</script>

<!-- Custom jquery scripts -->
<script src="http://localhost:8080/Fuentes/js/jquery/custom_jquery.js" type="text/javascript"></script>
 
<!-- Tooltips -->
<script src="http://localhost:8080/Fuentes/js/jquery/jquery.tooltip.js" type="text/javascript"></script>
<script src="http://localhost:8080/Fuentes/js/jquery/jquery.dimensions.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
	$('a.info-tooltip ').tooltip({
		track: true,
		delay: 0,
		fixPNG: true, 
		showURL: false,
		showBody: " - ",
		top: -35,
		left: 5
	});
});
</script> 


<!--  date picker script -->
<link rel="stylesheet" href="http://localhost:8080/Fuentes/css/datePicker.css" type="text/css" />
<script src="http://localhost:8080/Fuentes/js/jquery/date.js" type="text/javascript"></script>
<script src="http://localhost:8080/Fuentes/js/jquery/jquery.datePicker.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
        $(function()
{

// initialise the "Select date" link
$('#date-pick')
	.datePicker(
		// associate the link with a date picker
		{
			createButton:false,
			startDate:'01/01/2005',
			endDate:'31/12/2020'
		}
	).bind(
		// when the link is clicked display the date picker
		'click',
		function()
		{
			updateSelects($(this).dpGetSelected()[0]);
			$(this).dpDisplay();
			return false;
		}
	).bind(
		// when a date is selected update the SELECTs
		'dateSelected',
		function(e, selectedDate, $td, state)
		{
			updateSelects(selectedDate);
		}
	).bind(
		'dpClosed',
		function(e, selected)
		{
			updateSelects(selected[0]);
		}
	);
	
var updateSelects = function (selectedDate)
{
	var selectedDate = new Date(selectedDate);
	$('#d option[value=' + selectedDate.getDate() + ']').attr('selected', 'selected');
	$('#m option[value=' + (selectedDate.getMonth()+1) + ']').attr('selected', 'selected');
	$('#y option[value=' + (selectedDate.getFullYear()) + ']').attr('selected', 'selected');
}
// listen for when the selects are changed and update the picker
$('#d, #m, #y')
	.bind(
		'change',
		function()
		{
			var d = new Date(
						$('#y').val(),
						$('#m').val()-1,
						$('#d').val()
					);
			$('#date-pick').dpSetSelected(d.asString());
		}
	);

// default the position of the selects to today
var today = new Date();
updateSelects(today.getTime());

// and update the datePicker to reflect it...
$('#d').trigger('change');
});
</script>

<!-- MUST BE THE LAST SCRIPT IN <HEAD></HEAD></HEAD> png fix -->
<script src="http://localhost:8080/Fuentes/js/jquery/jquery.pngFix.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$(document).pngFix( );
});
</script>
</head>
<body> 
<form action='<%=request.getContextPath() + "/index.jsp"%>' method="post">
			<input id="permiso" name="permiso" type="hidden" value="ConsultaEventos"/>
			
				<%
					ArrayList<EventoVO> datos = (ArrayList<EventoVO>)request.getAttribute("datos");
					int paginas = (Integer)request.getAttribute("paginas");
					int paginaActual = (Integer)request.getAttribute("paginaActual");
					String idCasa    = request.getParameter("idCasa");
				%>
<!-- Start: page-top-outer -->
<div id="page-top-outer">    

<!-- Start: page-top -->
<div id="page-top">

	<!-- start logo -->
	<div id="logo">
	<a href=""><img src="http://localhost:8080/Fuentes/images/shared/logo.png" width="156" height="40" alt="" /></a>
	</div>
	<!-- end logo -->
	
	
 	<div class="clear"></div>

</div>
<!-- End: page-top -->

</div>
<!-- End: page-top-outer -->
	
<div class="clear">&nbsp;</div>
 
<!--  start nav-outer-repeat................................................................................................. START -->
<div class="nav-outer-repeat"> 
<!--  start nav-outer -->
<div class="nav-outer"> 

		<!-- start nav-right -->
		<div id="nav-right">
		
			<div class="nav-divider">&nbsp;</div>
			<div class="nav-divider">&nbsp;</div>
			<a href="login.jsp" id="logout"><img src="http://localhost:8080/Fuentes/images/shared/nav/nav_logout.gif" width="64" height="14" alt="" /></a>
			<div class="clear">&nbsp;</div>
		
			<!--  start account-content -->	
			<div class="account-content">
			<div class="account-drop-inner">
				<a href="" id="acc-settings">Settings</a>
				<div class="clear">&nbsp;</div>
				<div class="acc-line">&nbsp;</div>
				<a href="" id="acc-details">Personal details </a>
				<div class="clear">&nbsp;</div>
				<div class="acc-line">&nbsp;</div>
				<a href="" id="acc-project">Project details</a>
				<div class="clear">&nbsp;</div>
				<div class="acc-line">&nbsp;</div>
				<a href="" id="acc-inbox">Inbox</a>
				<div class="clear">&nbsp;</div>
				<div class="acc-line">&nbsp;</div>
				<a href="" id="acc-stats">Statistics</a> 
			</div>
			</div>
			<!--  end account-content -->
		
		</div>
		<!-- end nav-right -->


		<!--  start nav -->
		<div class="nav">
		<div class="table">
		
		<ul class="select">
		  <li><a href="<%=request.getContextPath()%>/ListarCasasUsuarioServlet?permiso=ListarCasas"><strong>Casas</strong></a><!--<![endif]-->
		<!--[if lte IE 6]><table><tr><td><![endif]-->
		
		<!--[if lte IE 6]></td></tr></table></a><![endif]-->
		</li>
		</ul>
		
		
		
			
		
		<div class="nav-divider">&nbsp;</div>
		<div class="clear"></div>
		</div>
		<div class="clear"></div>
		</div>
		<!--  start nav -->

</div>
<div class="clear"></div>
<!--  start nav-outer -->
</div>
<!--  start nav-outer-repeat................................................... END -->

 <div class="clear"></div>
 
<!-- start content-outer ........................................................................................................................START -->
<div id="content-outer">
<!-- start content -->
<div id="content">

	<!--  start page-heading -->
	<div id="page-heading">
		<h1>Lista Eventos </h1>
	</div>
	<!-- end page-heading -->

	<table border="0" width="100%" cellpadding="0" cellspacing="0" id="content-table">
	<tr>
		<th rowspan="3" class="sized"><img src="http://localhost:8080/Fuentes/images/shared/side_shadowleft.jpg" width="20" height="300" alt="" /></th>
		<th class="topleft"></th>
		<td id="tbl-border-top">&nbsp;</td>
		<th class="topright"></th>
		<th rowspan="3" class="sized"><img src="http://localhost:8080/Fuentes/images/shared/side_shadowright.jpg" width="20" height="300" alt="" /></th>
	</tr>
	<tr>
		<td id="tbl-border-left"></td>
		<td>
		<!--  start content-table-inner ...................................................................... START -->
		<div id="content-table-inner">
		
			<!--  start table-content  -->
			<div id="table-content">		
				
				<!--  start message-red -->
				<div id="message-red">
				
				</div>
				<!--  end message-red -->
				
							
				
		 
				<!--  start product-table ..................................................................................... -->
<form id="mainform" action="">
				<table border="0" width="100%" cellpadding="0" cellspacing="0" id="product-table">
				<thead>
				<tr>
					
					<th class="table-header-repeat line-left minwidth-1"><a href="">Fecha</a></th>
					<th class="table-header-repeat line-left minwidth-1"><a href="">Inmueble</a></th>
					<th class="table-header-repeat line-left minwidth-1"><a href="">Id Sensor</a></th>
					<th class="table-header-repeat line-left minwidth-1"><a href="">Tipo Sensor</a></th>
					<th class="table-header-repeat line-left minwidth-1"><a href="">Evento</a></th>
					<th class="table-header-repeat line-left minwidth-1"><a href="">Tag ID</a></th>
					<th class="table-header-repeat line-left minwidth-1"><a href="">Descripcion</a></th>
					<th class="table-header-repeat line-left minwidth-1"><a href="">Es Alerta</a></th>
					<th class="table-header-repeat line-left minwidth-1"><a href="">Tiempo Respuesta</a></th>
					<th class="table-header-repeat line-left minwidth-1"><a href="">Muestreo</a></th>
										
				</tr>
				</thead>
				<tbody>
				<%
							for(int i=0;i<datos.size(); i++){
								out.println(
										"<tr>"+
											"<td>" + datos.get(i).getFecha() 		  + "</td>"+
										    "<td>" + datos.get(i).getCodigoInmueble() + "</td>"+
										    "<td>" + datos.get(i).getCodigoSensor()   + "</td>"+
										    "<td>" + TipoSensor.TipoSensorEnum.getEnum(datos.get(i).getTipoSensor()) 	  + "</td>"+
										    "<td>" + datos.get(i).getCodigoEvento()   + "</td>"+
										    "<td>" + datos.get(i).getCodigoTagId()    + "</td>"+
										    "<td>" + datos.get(i).getDescripcion()    + "</td>"+
										    "<td>" + datos.get(i).EsAlerta() 		  + "</td>"+
										    "<td>" + datos.get(i).getTiempoRespuesta()+ "</td>"+
										    "<td>" + datos.get(i).getMuestreo()		  + "</td>"+
										"</tr>"
										);
							} 
						%>
				</tbody>
				</table>
				
				<p align="center">
				<%
				int adicionales = 5;
				for (int i=0; i<paginas; i++){
					
					if (i == paginaActual-adicionales-1){
						out.println("<a href=" + request.getContextPath() + "/Reporteador?permiso=ConsultaEventos&idCasa="+idCasa+"&pagina=" + (i+1) + ">...</a>&nbsp;&nbsp;");
					}
						
					if (i == paginaActual){
						out.println(i + "&nbsp;&nbsp;");
					}else if (i > paginaActual-adicionales && i < paginaActual + adicionales){
						out.println("<a href=" + request.getContextPath() + "/Reporteador?permiso=ConsultaEventos&idCasa="+idCasa+"&pagina=" + i + ">"+ i + "</a>&nbsp;&nbsp;");
					}
					
					if (i == paginaActual + adicionales){
						out.println("<a href=" + request.getContextPath() + "/Reporteador?permiso=ConsultaEventos&idCasa="+idCasa+"&pagina=" + (i) + ">...</a>&nbsp;&nbsp;");
					}
				}
				%>
			</p>
				<!--  end product-table................................... --> 
</form>
<!--  end content-outer........................................................END -->

<div class="clear">&nbsp;</div>
    
 <script language="javascript">
			$(document).ready(function() { 
			    // call the tablesorter plugin 
			    $("table").tablesorter({ 
			        // sort on the first column and third column, order asc 
			        sortList: [[0,0],[2,0]] 
			    }); 
			});  
		</script>
</body>
</html>